<template>
    <div class="teach">
        <el-row>
            <el-col :span="24">
                <div class="crumbs">
                    <el-breadcrumb separator=">" style="margin-top: 10px;">
                        <el-breadcrumb-item>申请管理</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ path: '/' }">教学设备借入申请</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
            </el-col>
        </el-row>

            <el-col :span="24">
                <div class="contener boderSet">
                    <div class="grid-content bg-purple-dark">
                        <h3 style="margin-top: 30px;">教学设备借入申请记录</h3>
                        <el-button type="primary" icon="el-icon-plus"
                            style="padding: 12px;background-color:#343961">发起借入申请</el-button>
                        <!-- <el-input v-model="input" placeholder="请输入内容" style="width: 200px;margin-left: 30px;"></el-input> -->
                        <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
                            class="datas" end-placeholder="结束日期">
                        </el-date-picker>
                        <el-button type="primary" style="background-color:#343961; margin-left: 10px;">查询</el-button>
                        <span class="spantion"><img src="./../../assets/images/导入文件icon.svg"></span>
                        <el-dropdown>
                            <el-button type="primary" class="btntion">
                                导出excel<i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>导出全部</el-dropdown-item>
                                <el-dropdown-item>导出选中</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    
                        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark"
                            style="width: 100%; margin-top: 30px;" @selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="55">
                            </el-table-column>
                            <el-table-column label="申请时间" width="300" prop="Applicatime">
                                <template slot-scope="scope">{{ scope.row.Applicatime }}</template>
                            </el-table-column>
                            <el-table-column prop="name" label="借入物品" width="300">
                            </el-table-column>
                            <el-table-column label="预计归还时间" width="300" prop="Returntime">
                                <template slot-scope="scope">{{ scope.row.Returntime }}</template>
                            </el-table-column>
                            <!-- <el-table-column prop="state" label="审核状态" show-overflow-tooltip width="300">
            </el-table-column> -->
                            <el-table-column prop="state" label="审核状态  " width="300"
                                :filters="[{ text: '通过', value: '通过' }, { text: '未通过', value: '未通过' }, { text: '审核中', value: '审核中' }]"
                                :filter-method="filterTag" filter-placement="bottom-end">
                                <template slot-scope="scope">
                                    <el-tag :type="scope.row.state === '通过' ? 'primary' : 'success'" disable-transitions>{{
                                        scope.row.state }}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button type="primary" icon="el-icon-edit" @click="dialogTableVisible = true"
                                        circle></el-button>
                                    <el-button type="danger" icon="el-icon-delete" circle
                                        :data-id="scope.row.id"></el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination background layout="total, prev, pager, next" @current-change="handleCurrentChange"
                            :current-page="currentPage" :page-size="pageSize" :total="total"
                            style="margin-left: 930px;margin-top: 10px;"></el-pagination>
                    </div>
                </div>
            </el-col>
       

        <el-dialog title="申请详情" :visible.sync="dialogTableVisible" :width="'1300px'">
            <div>
                2017-05-03
            </div>
            <el-table :data="tableData">
                <el-table-column property="classify" label="分类" width="150"></el-table-column>
                <el-table-column property="name" label="名称" width="150"></el-table-column>
                <el-table-column property="encode" label="编码" width="150"></el-table-column>
                <el-table-column property="unitprice" label="单价（元）" width="100"></el-table-column>
                <el-table-column property="Available" label="可用数量" width="100"></el-table-column>
                <el-table-column property="specification" label="规格" width="100"></el-table-column>
                <el-table-column property="Storage" label="存放地点" width="150"></el-table-column>
                <el-table-column property="sole" label="是否唯一" width="100"></el-table-column>
                <el-table-column property="Inbound" label="入库时间" width="150"></el-table-column>
                <el-table-column property="Borrowed" label="借入数量" width="100"></el-table-column>
            </el-table>
            <div>
                <h3>预计归还时间:<span>2017-05-03</span></h3>
                <h3>备注:<span>已归还</span></h3>
            </div>
            <el-steps :space="200" :active="1" finish-status="success" style="margin-top: 20px;">
                <el-step title="发起申请"></el-step>
                <el-step title="审核进中"></el-step>
                <el-step title="审核通过"></el-step>
            </el-steps>
        </el-dialog>

    </div>
</template>
  
<script>
 import { mapGetters } from 'vuex';
 import axios from 'axios';
export default {
    data() {
        return {
            currentPage: 1,
            pageSize: 10,
            total: 200,
            value1: '',
            input: '',
            dialogTableVisible: false,
            form: {
                Applicatime: '',
                date1: '',
                Returntime:'',
                state:'',
                delivery: false,

            },
            tableData: [],
            multipleSelection: []
          
        }
    },
    methods: {
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

        filterTag(value, row) {
            return row.state === value;
        },
        handleCurrentChange(currentPage) {
            this.currentPage = currentPage;
            console.log('当前页码：', currentPage);
        },
        //显示数据
       
        
    }
}


</script>
  
<style scoped>
.datas {
    margin-left: 10px;
}

.btntion {

    background-color: white;
    color: #343961;

}

.spantion {
    margin-left: 640px;


}

.spantion img {
    width: 40px;
    height: 40px;
    margin-top: 20px;
    margin-bottom: -10px;
}

.el-dropdown {
    margin-left: 10px;
}
.crumbs {
    margin: 10px 30px;
}
.contener {
    margin: 20px 30px;
    padding: 30px;
}
.boderSet {
border-radius: 10px !important;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

</style>